<template>
  <div class="app-container">
    <table-search @onSearch="getSchedulers" @onReset="handleReset">
      <template slot="search">
        <date-group @success="handleDate" />
      </template>
    </table-search>
    <table-page
      :data="list"
      :loading="loadingTableVisible"
      :where="listQuery"
      :total="total"
      @pagination="getSchedulers"
    >
      <template slot="column">
        <el-table-column label="编号" prop="id" align="center" width="80" />
        <el-table-column label="名称" prop="name" align="center" />
        <el-table-column label="耗时" prop="duration" align="center" width="100" />
        <el-table-column label="行数" prop="count" />
        <el-table-column label="执行时间" prop="creationTime" align="center" width="150">
          <template slot-scope="scope">
            <div v-html="$htmlFunction.parseTime(scope.row.creationTime)" />
          </template>
        </el-table-column>
      </template>
    </table-page>
  </div>
</template>

<script>
import TablePage from '@/components/TablePage'
import TableSearch from '@/components/TableSearch'
import DateGroup from '@/components/DateGroup'

export default {
  name: 'SchedulerLog',
  components: { TablePage, TableSearch, DateGroup },
  data() {
    const listDefault = {
      page: 1,
      limit: 20,
      startTime: undefined,
      endTime: undefined
    }
    return {
      listQuery: {
        page: 1,
        limit: 20,
        startTime: undefined,
        endTime: undefined
      },
      list: [],
      total: 0,
      loadingTableVisible: true
    }
  },
  created() {
    this.getSchedulers()
  },
  methods: {
    getSchedulers: function() {
      this.loadingTableVisible = true
      this.$post('/log/scheduler/list', this.listQuery)
        .then(response => {
          this.list = response.data.items
          this.total = response.data.total
          this.loadingTableVisible = false
        })
        .catch(() => {
          this.loadingTableVisible = false
        })
    },
    handleReset: function() {
      this.listQuery = this.listDefault
    },
    handleDate: function(startTime, endTime) {
      this.listQuery.startTime = startTime
      this.listQuery.endTime = endTime
    }
  }
}
</script>
